<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防火门状态管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .table-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .checkbox-custom {
                @apply w-4 h-4 text-primary border-gray-medium rounded focus:ring-primary transition duration-150 ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gray-light font-inter min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 页面标题 -->
        <div class="mb-8 text-center">
            <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-2">防火门控制管理模块</h1>
            <!-- <p class="text-gray-dark text-lg">实时监控和控制建筑物内防火门状态</p> -->
        </div>

        <!-- 操作面板 -->
        <div class="bg-white rounded-xl p-5 mb-6 table-shadow">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div class="flex items-center space-x-2">
                    <input type="checkbox" id="selectAll" class="checkbox-custom" />
                    <label for="selectAll" class="text-dark font-medium">全选</label>
                </div>
                <div class="flex flex-wrap gap-3">
                    <button id="openSelected" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium flex items-center gap-2 btn-hover">
                        <i class="fa fa-unlock-alt"></i>
                        <span>开启选中防火门</span>
                    </button>
                    <button id="refreshBtn" class="bg-white border border-gray-medium hover:border-primary text-dark px-5 py-2 rounded-lg font-medium flex items-center gap-2 btn-hover">
                        <i class="fa fa-refresh"></i>
                        <span>刷新状态</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="bg-white rounded-xl overflow-hidden table-shadow">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-gray-light text-left text-dark">
                            <th class="px-6 py-4 font-semibold">选择</th>
                            <th class="px-6 py-4 font-semibold">编号</th>
                            <th class="px-6 py-4 font-semibold">名称位置</th>
                            <th class="px-6 py-4 font-semibold">当前状态</th>
                            <th class="px-6 py-4 font-semibold">操作</th>
                        </tr>
                    </thead>
                    <tbody id="fireDoorTable">
                        <!-- 表格内容将通过 JavaScript 动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 状态面板 -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white rounded-xl p-5 table-shadow">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center">
                        <i class="fa fa-check-circle text-success text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-dark font-semibold text-lg">正常关闭</h3>
                        <p class="text-success font-bold text-2xl" id="closedCount">0</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-5 table-shadow">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
                        <i class="fa fa-exclamation-triangle text-warning text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-dark font-semibold text-lg">异常开启</h3>
                        <p class="text-warning font-bold text-2xl" id="openCount">0</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-5 table-shadow">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-shield text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-dark font-semibold text-lg">防火门总数</h3>
                        <p class="text-primary font-bold text-2xl" id="totalCount">0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作结果提示框 -->
    <div id="toast" class="fixed top-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center gap-2">
        <i id="toastIcon" class="fa fa-check-circle"></i>
        <span id="toastMessage"></span>
    </div>

    <script>
        // 模拟防火门数据
        let fireDoors = [
            { id: 'FD-001', location: '1号楼1层东侧', status: '关闭' },
            { id: 'FD-002', location: '1号楼1层西侧', status: '关闭' },
            { id: 'FD-003', location: '1号楼2层东侧', status: '开启' },
            { id: 'FD-004', location: '1号楼2层西侧', status: '关闭' },
            { id: 'FD-005', location: '2号楼1层大厅', status: '开启' },
        ];

        // DOM 加载完成后初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            renderFireDoorTable();
            updateStatusCounters();
            
            // 全选复选框事件监听
            document.getElementById('selectAll').addEventListener('change', toggleSelectAll);
            
            // 开启选中按钮事件监听
            document.getElementById('openSelected').addEventListener('click', openSelectedDoors);
            
            // 刷新按钮事件监听
            document.getElementById('refreshBtn').addEventListener('click', () => {
                showToast('success', '已刷新防火门状态');
                renderFireDoorTable();
                updateStatusCounters();
            });
        });

        // 渲染防火门表格
        function renderFireDoorTable() {
            const tableBody = document.getElementById('fireDoorTable');
            tableBody.innerHTML = '';
            
            fireDoors.forEach(door => {
                const row = document.createElement('tr');
                row.className = 'border-b border-gray-light hover:bg-gray-50 transition-colors duration-200';
                
                // 选择列
                const selectCell = document.createElement('td');
                selectCell.className = 'px-6 py-4';
                selectCell.innerHTML = `
                    <input type="checkbox" class="door-checkbox checkbox-custom" data-id="${door.id}">
                `;
                
                // 编号列
                const idCell = document.createElement('td');
                idCell.className = 'px-6 py-4 font-medium';
                idCell.textContent = door.id;
                
                // 位置列
                const locationCell = document.createElement('td');
                locationCell.className = 'px-6 py-4';
                locationCell.textContent = door.location;
                
                // 状态列
                const statusCell = document.createElement('td');
                statusCell.className = 'px-6 py-4';
                const statusClass = door.status === '关闭' ? 'bg-success/10 text-success' : 'bg-warning/10 text-warning';
                const statusIcon = door.status === '关闭' ? 'fa-lock' : 'fa-unlock';
                statusCell.innerHTML = `
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full ${statusClass}">
                        <i class="fa ${statusIcon}"></i>
                        <span>${door.status}</span>
                    </div>
                `;
                
                // 操作列
                const actionCell = document.createElement('td');
                actionCell.className = 'px-6 py-4';
                const disabled = door.status === '开启' ? 'opacity-50 cursor-not-allowed' : '';
                actionCell.innerHTML = `
                    <button class="open-door-btn bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-lg font-medium flex items-center gap-1.5 btn-hover ${disabled}" 
                            data-id="${door.id}" 
                            ${door.status === '开启' ? 'disabled' : ''}>
                        <i class="fa fa-unlock-alt"></i>
                        <span>开启</span>
                    </button>
                `;
                
                // 添加单元格到行
                row.appendChild(selectCell);
                row.appendChild(idCell);
                row.appendChild(locationCell);
                row.appendChild(statusCell);
                row.appendChild(actionCell);
                
                // 添加行到表格
                tableBody.appendChild(row);
                
                // 为单个开启按钮添加事件监听
                const openBtn = row.querySelector('.open-door-btn');
                if (openBtn && !openBtn.disabled) {
                    openBtn.addEventListener('click', () => {
                        openDoor(door.id);
                    });
                }
                
                // 为复选框添加事件监听
                const checkbox = row.querySelector('.door-checkbox');
                checkbox.addEventListener('change', updateSelectAllState);
            });
        }

        // 更新状态计数器
        function updateStatusCounters() {
            const closedCount = fireDoors.filter(door => door.status === '关闭').length;
            const openCount = fireDoors.filter(door => door.status === '开启').length;
            
            document.getElementById('closedCount').textContent = closedCount;
            document.getElementById('openCount').textContent = openCount;
            document.getElementById('totalCount').textContent = fireDoors.length;
        }

        // 切换全选状态
        function toggleSelectAll() {
            const isChecked = this.checked;
            document.querySelectorAll('.door-checkbox').forEach(checkbox => {
                checkbox.checked = isChecked;
            });
        }

        // 更新全选按钮状态
        function updateSelectAllState() {
            const checkboxes = document.querySelectorAll('.door-checkbox');
            const checkedCount = document.querySelectorAll('.door-checkbox:checked').length;
            document.getElementById('selectAll').checked = checkboxes.length > 0 && checkedCount === checkboxes.length;
        }

        // 开启单个防火门
        function openDoor(doorId) {
            const door = fireDoors.find(d => d.id === doorId);
            if (door && door.status === '关闭') {
                door.status = '开启';
                renderFireDoorTable();
                updateStatusCounters();
                showToast('success', `已开启防火门 ${doorId}`);
            }
        }

        // 开启选中的防火门
        function openSelectedDoors() {
            const selectedIds = Array.from(document.querySelectorAll('.door-checkbox:checked'))
                .map(checkbox => checkbox.getAttribute('data-id'));
            
            if (selectedIds.length === 0) {
                showToast('warning', '请先选择要开启的防火门');
                return;
            }
            
            const doorsToOpen = selectedIds.filter(id => {
                const door = fireDoors.find(d => d.id === id);
                return door && door.status === '关闭';
            });
            
            if (doorsToOpen.length === 0) {
                showToast('info', '所选防火门均已开启');
                return;
            }
            
            doorsToOpen.forEach(id => {
                const door = fireDoors.find(d => d.id === id);
                if (door) door.status = '开启';
            });
            
            renderFireDoorTable();
            updateStatusCounters();
            showToast('success', `已成功开启 ${doorsToOpen.length} 个防火门`);
        }

        // 显示提示框
        function showToast(type, message) {
            const toast = document.getElementById('toast');
            const toastIcon = document.getElementById('toastIcon');
            const toastMessage = document.getElementById('toastMessage');
            
            // 设置图标和背景色
            if (type === 'success') {
                toast.classList.remove('bg-dark', 'bg-warning', 'bg-info');
                toast.classList.add('bg-success');
                toastIcon.className = 'fa fa-check-circle';
            } else if (type === 'warning') {
                toast.classList.remove('bg-dark', 'bg-success', 'bg-info');
                toast.classList.add('bg-warning');
                toastIcon.className = 'fa fa-exclamation-triangle';
            } else if (type === 'info') {
                toast.classList.remove('bg-dark', 'bg-success', 'bg-warning');
                toast.classList.add('bg-primary');
                toastIcon.className = 'fa fa-info-circle';
            }
            
            toastMessage.textContent = message;
            
            // 显示提示框
            toast.classList.remove('translate-x-full');
            
            // 3秒后隐藏提示框
            setTimeout(() => {
                toast.classList.add('translate-x-full');
            }, 3000);
        }
    </script>
</body>
</html>
    